Individualni slovni znakovi vektorske grafike u XML-u (primjene na karakteristične znakove hrvatske abecede u SVG-u)

Maja Turčić, Maja Rudolf

Sažetak

Da bi se omogućio standardni format fonta za SVG, koji garantira podršku svih SVG preglednika, SVG pruža mogućnost definiranja fontova. Svrha SVG fontova je isporuka slovnog znaka na korisničko sučelje u obliku u kojem je definiran. Budući da su SVG fontovi neovisni o sistemskim fontovima zagarantiran je njihov izvorno definiran izgled.
Izrada samog SVG fonta se odvija u SVG dokumentu, iako se dizajn svakog slovnog znaka može izraditi u dizajnerskim vektorskim programima koji podržavaju SVG format.
Karakterističnim znakovima, kao i svim ostalim znakovima abecede, dodjeljuje se ime i njihov pripadajući Unicode kod. Našim primjerom pokazali smo kako se definira individualizirani font sa karakterističnim znakovima hrvatske abecede te njihova primjena u SVG dokumentu.
Ključne riječi: SVG, kreiranje fontova, karakteristični znakovi

Individualized font characters of XML vector graphics (with implementation of Croatian alphabet glyphs in SVG)

Maja Turčić, Maja Rudolf

Summary

To provide a standard font format for SVG, that guarantees support in all SVG-compliant viewers, SVG has an option of defining fonts. The purpose of SVG fonts is to reliably display a defined font character on any interface. SVG fonts are independent of system fonts.
SVG fonts are created in SVG documents, though it can be designed in any vector program that supports SVG format.
All characteristic glyphs have their own associated names and Unicode. With our example we have shown how to define an individualized font with Croatian alphabet glyphs and their implementation in a SVG document.
Keywords: SVG, creating fonts, special characters

1. Uvod
U XML-u tekst je definiran kao niz XML znakova, gdje je svaki znak definiran određenim Unicode kodom. Fontovi se sastoje od skupine slovnih znakova i drugih potrebnih informacija. Slovni znak je prikaz jednog ili više znakova. Svaki slovni znak se sastoji od neke vrste identifikatora (koji može biti niz znakova ili brojeva) uz uputstva za renderiranje dotičnog slova.
Najčešće je prisutno jednoznačno pridruživanje Unicode koda sa određenim slovnim znakom, međutim u određenim situacijama kodu pridružujemo više znakova, kao npr. ligature, dijakritički znakovi, pozicija slovnog znaka, slova koja se sastoje od više znakova te specifično pridruživanje nekog znaka nekom nizu Unicode kodova.
U nekim situacijama algoritmi za pridruživanje slova znakovima su zavisni o sistemu što rezultira time da se tekst prikazuje drugačije na raznim korisničkim okruženjima. Ukoliko je potrebno precizno prikazivanje fontova ili znakova u SVG-u, preporuča se korištenje SVG font sistema ugrađenog u SVG dokument ili Web font postavljen na istu lokaciju kao i SVG dokument.
Našim primjerom pokazali smo metode izrade SVG fonta koje uključuju i korištenje karakterističnih znakova hrvatske abecede.

2. Što je SVG?
SVG je aplikacija XML-a. Prednost ovoga je ta da je cijela struktura sintakse SVG-a već poznata i moguće ju je parsirati postojećim programima. To još znači da SVG može imati koristi i od drugih aktivnosti unutar W3C-a, koje se dotiču XML standarda.
SVG je jezik za opisivanje dvodimenzionalne grafike u XML-u. On dopušta 3 tipa grafičkih objekata: vektorsku grafiku, slike i tekst. Grafički objekti se mogu grupirati, stilizirati, transformirati i složiti u prethodno renderirane objekte. SVG uključuje mogućnosti ugnježđivanja transformacija, isječak puta (clipping path), alfa maske, filter efekte i predloške.
SVG crteži mogu biti interaktivni i dinamični. Animacije se mogu definirati i pokrenuti deklarativno (npr. ugrađivanjem SVG elemenata animacije u SVG sadržaj) ili putem skriptnog jezika.
Sofisticirane SVG aplikacije su moguće korištenjem dodatnog programskog jezika koji pristupa SVG Document Object Model-u (DOM), koji pruža potpuni pristup svim elementima, atributima i svojstvima.

3. Fontovi u SVG-u
Cilj svakog SVG dokumenta je konzistentan prikaz sadržaja kod svih korisnika. Govoreći o fontovima, posebno je važno da neovisno o dizajnerskom odabiru fonta i instaliranim fontovima na korisničkom kompjutoru, prikaz bude uvijek jednak.
SVG koristi elemente „Cascading Style Sheets-a“ (CSS2) kao ključni mehanizam za prikazivanje fontova na Web-u. SVG aplikacije generiraju komprimirani font koji se sprema na lokaciju koja je povezana s referentnim dokumentom. Nedostatak CSS tehnologije je što ne zahtjeva određeni format fontova što rezultira problemima izvedbe kod korisničkih posrednika.
SVG pruža mogućnost korištenja jedinstvenog formata fontova koji jamči podršku svih SVG preglednika. SVG fontovi omogućuju veću fleksibilnost izbora,kreiranja i korištenja fontova. Na primjer, umjesto korištenja logotipa u obliku slike, moguće je logotip spremiti kao određeni slovni znak kreiranog fonta, zadržati vektorski oblik te ga koristiti kao tekst element.

4. Kreiranje fonta u SVG-u
SVG font se definira pomoću elementa 'font'. SVG fontovi su namijenjeni isključivo za Web prikaz. Budući da su SVG fontovi definirani pomoću SVG elemenata i atributa, u nekim slučajevima, zauzimat će više mjesta od drugih formata fontova za Web. Ključna prednost korištenja SVG fontova je zagarantirana dostupnost svim SVG korisničkim posrednicima. SVG font može biti alternativa u slučaju da određeni sistemski font nije dostupan datom korisniku.
Karaktersitike i atributi SVG fontova odgovaraju karakteristikama i parametrima CSS specifikacija.
Slovni znakovi u SVG fontu definiraju se unutar četverca. Pomoću atributa 'units-per-em' određuje se na koliko se jedinica četverac dijeli. Početna vrijednost je 1000. Za razliku od standardno orijentiranog SVG koordinatnog sustava gdje je y-os okrenuta prema dolje, koordinatni sustav za slovne znakove ima y-os okrenutu prema gore.
SVG font se može ugraditi unutar istog dokumenta u kojem se koristi ili spremiti kao dio vanjskog dokumenta.
'Font' element ima atribute koji mogu definirati: x i y koordinatu ishodišta slovnih znakova unutar fonta, horizontalni i vertikalni pomak slovnog znaka u odnosu na predhodni slovni znak, ishodište koordinatnog sustava pri pisanju vertikalno orijentiranog teksta.
Svaki 'font' element mora imati svoj dijete-element 'font-face' koji opisuje karakteristike fonta. Taj element i njegovi atributi se podudaraju sa 'font-face' atributom u CSS-u. Svojstva koja se mogu definirati ovim elementom su: ime fonta ('font-family'), stil, veličinu i debljinu slovnih znakova, spacioniranje, raspon Unicode raspoloživih kodova, podijeljenost četverca na jedinice, nagib slova, visinu verzala i kurenta, visinu ascendera i descendera, poziciju i debljinu linija za podcrtavanje, linija zaglavlja te linija za precrtavanje.
Izgled slovnih znakova definira se unutar 'glyph' elementa. Koordinatni sustav svakog slovnog znaka definiran je 'font' elementom. Put koji definira slovni znak se nalazi unutar 'd' atributa. Ukoliko je slovni znak složeniji za definiciju oblika može se koristiti bilo koji element za kreiranje grafike u SVG-u. Svaki 'glyph' mora imati atribut 'unicode' koji određuje o kojem se slovnom znaku radi. Također može imati atribute koji određuju ime slova, definiciju puta, orijentaciju slovnog znaka, jezik, horizontalni i vertikalni pomak svakog znaka.
Elementom 'missing-glyph' definiramo koji oblik će se prikazati ukoliko određeni slovni znak nije definiran 'glyph' elementom.
Također možemo manipulirati kerningom određenih parova slovnih znakova.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%">
<defs>
<font id="Ivica" >
<font-face font-family="Ivica" units-per-em="900"        descent="200">
</font-face>
<missing-glyph horiz-adv-x = "1000">
<path d="M0,0h900v900h-900z"/>
</missing-glyph>
<glyph unicode=" " horiz-adv-x="500"></glyph>
<glyph unicode="č" horiz-adv-x = "450">
<g>

<path d="M325.5,31.5c74.2,23.4,116.2,46.8,125.8,70.2c-17,5.6-29.9,8.1-38.8,7.3C353.7,81.5,286.3,62.5,210.4,52c-18.6-4.8-47.2,2.8-86,23C76.8,98.5,53,130.8,53,172c0,6.5,0.4,12.9,1.2,19.4c11.3,62.2,
29.9,115.1,55.7,158.8c25.8,43.6,53.7,69.9,83.6,78.8c11.3,4,22.6,6.1,33.9,
6.1c54.9,0,92.8-34.1,113.8-102.2c8.9-6.5,16.5-9.7,23-9.7c7.3,0,10.9,5.3,10.9,
15.8c-25,47.9-44.8,81.5-59.3,101C286,481.3,257.3,502,229.9,502c-52.4,
0-104.5-38.4-156.1-115.2 C24.6,314.9,0,249,0,189.2C0,143.1,16.7,
100,50.2,60S122.6,0,167,
0C205.7,0,258.5,10.5,325.5,31.5zM378.7,649.7c49.2,
60.4,83.5,96.3,102.8,107.6c-6.5,9.7-13.1,19.5-20,29.6c-6.9,10.1-17.1,
15.1-30.8,15.1c-18.6-12.9-39.1-39.5-61.7-79.7c-22.6-40.3-40.7-66-54.5-77.3c-10.5,
0-20.6,23.4-30.3,70.1c-4.8,29-9.7,58-14.5,
87c-6.5-4.8-15.8-9.1-27.8-12.7s-20.2-7.9-24.2-12.7c0-21.8,
9.3-60.5,27.8-116c18.5-55.6,33.5-89.5,
44.8-101.5C302.5,563,331.9,593.3,378.7,649.7z"/>
</g>
</glyph>
...

</font>
</defs>
<text x="10" y="150" style="font-family:Ivica;font-size:150;fill:black;"> abcćčdđefghijklm </text>
</svg

5. Naš primjer
Važno je odrediti način kodiranja dokumneta ukoliko se koristi abeceda sa specifičnim znakovima, kao što je hrvatska. Zato smo unutar XML deklaraciji odredili 'utf-8' kodiranje.
SVG font se ugrađuje u dokument pomoću 'font' elementa. Unutar tog elementa postoje informacije o imenu fonta, 'id' kojim ga kasnije pozivamo te definicije svakog znaka. Unutar 'font-face' dijete-elementa se nalaze definicije veličine četverca te relevantnih linija (ascender, descender). Svaki znak se definira zasebno pomoću 'glyph' elementa čijim atributima određujemo unicode znak te horizontalan odnosno vertikalan pomak. Ukoliko nam nisu potrebni svi znakovi abecede, postoji mogućnost da definiramo točno određene znakove te time drastično smanjimo veličinu dotičnog dokumenta. Međutim, ako pokušamo koristiti znak koji nije definiran, pojavit će se slika definirana 'missing-glyph' elementom.
Element 'path' unutar 'glyph' elementa određuje sliku slovnog znaka Bezierovim krivuljama.
Na kraju pozivamo kreirani font 'text' elementom sa pripadajućom pozicijom i stilom te znakovima koje želimo da se prikažu.

7. Zaključak
Zato što je SVG W3C standard baziran na XML-u pruža velike mogućnosti i kompatibilnosti. SVG je čiljiv i lako se uređuje te se može ugraditi u obične HTML stranice. Budući da je otvorenog tipa može se kreirati pomoću tekst editora što znači da nisu potrebni posebni programi. Međutim osigurana je i njegova kompatibilnost sa dizajnerskim vektorskim programima koji omogućuju kreiranje SVG dokumenata bez predhodnog znanja programiranja.
Postoje dva načina prikazivanja teksta u SVG-u. Prvi uključuje definiranje stilova pomoću CSS-a, ali zahtjeva korištenje sistemskih fontova. Drugi način je izrada SVG font-a koji je ugrađen u SVG dokument te mu je na taj način osiguran univerzalan prikaz.
SVG podržava Unicode te time pruža univerzalno 16-bitno kodiranje. Također ima ugrađen mehanizam koji dopušta pristup znakovima koji nisu definirani Unicode-om. Koristeći SVG font sistem i podršku Unicod-a, pokazale smo kako se individualizirani font sa specifičnim znakovima može izraditi i koristiti na Web-u.